<template>
    <div>
      <div class="search">
      <el-autocomplete v-model="disease" :fetch-suggestions="querySearch" placeholder="请输入订单号"
            :trigger-on-focus="false"   
            @select="handleSelect"
            @keyup.enter.native="search">
          </el-autocomplete>
          <el-button type="primary" @click="search">搜索</el-button></div>

    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="order" label="订单号" width="180" align="center"></el-table-column>
    <el-table-column prop="img" width="180" align="center"></el-table-column>
    <el-table-column prop="car" label="车辆信息" width="180" align="center" ></el-table-column>
    <el-table-column prop="date" label="日期" width="180" align="center" ></el-table-column>
    <el-table-column prop="day" label="租车天数" width="180" align="center"></el-table-column>
    <el-table-column prop="price" label="付款价格" width="100" align="center"></el-table-column>
    <el-table-column prop="option" label="操作" align="center">
         <el-button
          size="mini" type="success"
          @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </el-table-column>
  </el-table>

  <div class="block">
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>
    </div>
</template>

<script>
export default {
     data() {
      return {
        tableData: [{
          order:'001',car:'大众蔚蓝2.0t',date: '2016-05-02',
          day:'2',price: '$360'        
         
        }, {
          order:'001',car:'大众蔚蓝2.0t', date: '2016-05-02',
          day:'2',price: '$360'
          
        }, {
          order:'001',car:'大众蔚蓝2.0t',date: '2016-05-02',
          day:'2',price: '$360'
          
        }, {
          order:'001',car:'大众蔚蓝2.0t', date: '2016-05-02',
          day:'2',price: '$360'
        }, {
          order:'001',car:'大众蔚蓝2.0t',date: '2016-05-02',
          day:'2',price: '$360'
        }, {
          order:'001',car:'大众蔚蓝2.0t',date: '2016-05-02',
          day:'2',price: '$360'
        }, {
          order:'001',car:'大众蔚蓝2.0t',date: '2016-05-02',
          day:'2',price: '$360',
        }
        ],
        diseaseList: [], //这个值是需要匹配的值
        disease: ''     //这个值是用户正在输入的值
        }
      },
     methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
}

</script>

<style>
.search{
  margin-left:75%;
}
</style>